<template>
	<view>
    <view class="cu-modal" :class="showSearch ?'show':''">
      <view class="cu-dialog" style="width: 100%;border-radius:0 ;background-color: #FFFFFF;height:100vh;position: fixed; top: 0;left: 0;">
        <search-detail @hiddenSearch="showSearch = false" @changeCurrentTab="handleChangeTab" @changeCurrentList="handleChangeList" :currentType="fenlei" />
      </view>
    </view>
		<scroll-view scroll-y class="DrawerPage" :class="modalName?'show':''">
			<!-- 上部筛选栏 -->
			<view class="top-line">
				<view class="searchimagebox" @click="showSearch = true">
					<image class="searchimage" src="/static/sousuo.png"></image>
				</view>
				<Picker-my :price='pricelist' @changeOrder='changeOrder' @changeGrand='changeGrand' :priceindex='priceindex' :pinpaiindex='pinpaiindex' :pinpai='picklist'></Picker-my>
			</view> 
			<!-- 中部scroll -->
			<DivTab @changetab='changetab' :searchType="searchTypeId">
				<DiyItem :fenlei='fenlei' :list="list" :checkedname='checkedname' @checkitem='checkitem'></DiyItem>
			</DivTab>
			<!-- 底部按钮 -->
			<button class="butt" @click="showModal">我的配置</button>
		</scroll-view>
		<view class="DrawerClose" :class="modalName?'show':''" @tap="hideModal">
			<text class="cuIcon-pullright"></text>
		</view>
		<scroll-view scroll-y class="DrawerWindow" :class="modalName?'show':''">
			<view style="background-color: white;margin: 10px;">
				<OptionList :diy="true" :options="checked" ></OptionList>
        <button class="butt-little" @click="gotoCeping">测评</button>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
import searchDetail from '../../components/searchDetail/searchDetail.vue'
	const db = wx.cloud.database()
	const _ = db.command
	export default {
    components:{
      searchDetail
    },
		data() {
			return {
				modalName:false,
				list:[],
				showSearch:false,
				fenlei:'cpu',
				checkedname:'',
				grand:'全部',
				order:'全部',
				picklist:[],
				pricelist:['全部','价格升序','价格降序'],
				priceindex:0,
				pinpaiindex:0,
				searchTypeId:0,
				checked:{
					cpu:'',
					xianka:'',
					neicun:'',
					yingpan:'',
					sanreqi:'',
					dianyuan:'',
					jixiang:''
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
      gotoCeping(){
      				if(this.checked.cpu!=''&&this.checked.xianka!=''&&this.checked.neicun!=''&&this.checked.yingpan!=''&&this.checked.sanreqi!=''&&this.checked.dianyuan!=''&&this.checked.jixiang!=''){
      					uni.navigateTo({
      						url:'./ceping/ceping?checked='+JSON.stringify(this.checked) 
      					})
      				}else{
      					wx.showToast({
      						title:'请选择完整配置！',
      						icon:'error'
      					})
      				}
      				
      			},
			getList(){
				//仅在品牌为空时初始化品牌下拉列表||条件筛选
				if(this.grand!='全部'&&this.order!='全部'){
					db.collection(this.fenlei).where({
						brand:_.eq(this.grand)
					}).orderBy('price',this.order)
					.get().then(res=>{
						console.log('成功获取数据：',res.data)
            this.list = this.clearNullPrice(res.data)
					})
				}else if(this.grand=='全部'&&this.order!='全部'){
					db.collection(this.fenlei).orderBy('price',this.order)
					.get().then(res=>{
						console.log('成功获取数据：',res.data)
						 this.list = this.clearNullPrice(res.data)
					})
				}else if(this.grand!='全部'&&this.order=='全部'){
					db.collection(this.fenlei).where({
						brand:_.eq(this.grand)
					})
					.get().then(res=>{
						console.log('成功获取数据：',res.data)
						 this.list = this.clearNullPrice(res.data)
					})
				}else{
					db.collection(this.fenlei)
					.get().then(res=>{
						console.log('成功获取数据：',res.data)
						 this.list = this.clearNullPrice(res.data)
						this.initpicklist()
					})
				}
				this.changecheckedname()
			},
			// 使用set数组获取不重复的品牌，并转换数组传值picker 排序字段固定，无需初始化
			initpicklist(){
				var picklist=new Set();
				picklist.add('全部')
				this.list.forEach((item)=>{
					picklist.add(item.brand)
				})
				this.picklist=Array.from(picklist)
			},
			changeGrand(index){
				this.grand=this.picklist[index]
				this.pinpaiindex=index
				this.getList()
			},
			changeOrder(index){
				if(this.pricelist[index]=='价格升序'){
					this.order='asc'
				}else if(this.pricelist[index]=='价格降序'){
					this.order='desc'
				}else{
					this.order='全部'
				}
				// this.order=this.pricelist[index]
				this.priceindex=index
				this.getList()
			},
			// 保存选择的对应条目下的组件名称
			checkitem(evt){
				switch(this.fenlei){
					case 'cpu':this.checked.cpu=evt;break;
					case 'xianka':this.checked.xianka=evt;break;
					case 'zhuban':this.checked.zhuban=evt;break;
					case 'neicun':this.checked.neicun=evt;break;
					case 'yingpan':this.checked.yingpan=evt;break;
					case 'sanreqi':this.checked.sanreqi=evt;break;
					case 'dianyuan':this.checked.dianyuan=evt;break;
					case 'jixiang':this.checked.jixiang=evt;break;
				}
				this.changecheckedname()
			},
			//根据选择的条目更改选择的组件名称
			changecheckedname(){
				switch(this.fenlei){
					case 'cpu':this.checkedname=this.checked.cpu;break;
					case 'xianka':this.checkedname=this.checked.xianka;break;
					case 'zhuban':this.checkedname=this.checked.zhuban;break;
					case 'neicun':this.checkedname=this.checked.neicun;break;
					case 'yingpan':this.checkedname=this.checked.yingpan;break;
					case 'sanreqi':this.checkedname=this.checked.sanreqi;break;
					case 'dianyuan':this.checkedname=this.checked.dianyuan;break;
					case 'jixiang':this.checkedname=this.checked.jixiang;break;
				}
			},
			
      showModal(){
				this.modalName=true,
				console.log(this.checked)
			},
			hideModal() {
				this.modalName = false
			},
			// 更改tabbar，初始化picker，分类。。。。。
			changetab(fenlei){
       console.log(fenlei)
				this.fenlei=fenlei
				this.grand='全部'
				this.order='全部'
				this.pinpaiindex=0
				this.priceindex=0
				this.getList()
			},
      // 搜索框改变Tab状态
      handleChangeTab(type){
        console.log("父组件接收事件：",type);
        this.searchTypeId = this.mapCurrentTabId(type);
        this.fenlei = type;
      },
      // 搜索列表内容更改
      handleChangeList(data){
        this.list = data;  
      },
      // 传递tab组件id调整
      mapCurrentTabId(type){
        switch(type){
          case "cpu":
          return 0;
          case "xianka":
          return 1;
          case "zhuban":
          return 2;
          case "neicun":
          return 3;
          case "yingpan":
          return 4;
          case "sanreqi":
          return 5;
          case "dianyuan":
          return 6;
          case "jixiang":
          return 7;
        }    
      },
      // 价格展示null删除
        clearNullPrice(list){
         let newList = [];
         list.forEach(item => {
           if(item.price !== null)
              newList.push(item);        
         })
         return newList;
      }
		},

    

}
</script>

<style lang="scss" scoped>
	.butt{
		width: 90vw;
		border-radius: 10px;
		background-color: #1296db;
		color: white;
	}
	.top-line{
		display: flex;
		flex-direction: row;
		.searchimagebox{
			height: 8vh;
			width: 20vw;
			display: flex;
			align-items: center;
			justify-content: center;
			.searchimage{
				height: 30px;
				width: 30px;
			}
		}
	}
	page {
		background-image: var(--gradualBlue);
		width: 100vw;
		overflow: hidden;
	}
	.DrawerPage {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0vw;
		background-color: white;
		transition: all 0.4s;
	}

	.DrawerPage.show {
		transform: scale(0.9, 0.9);
		left: 85vw;
		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
		transform-origin: 0;
	}

	.DrawerWindow {
		position: absolute;
		width: 85vw;
		height: 100vh;
		left: 0;
		top: 0;
		transform: scale(0.9, 0.9) translateX(-100%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
		padding: 100upx 0;
	}
	.DrawerWindow.show {
		transform: scale(1, 1) translateX(0%);
		opacity: 1;
		pointer-events: all;
	}
  
  	.butt-little{
  		width: 30vw;
  		height: 6vh;
  		line-height: 6vh;
  		border-radius: 10px;
  		background-color: #1296db;
  		color: white;
  		margin:1vh auto;
  	}

	.DrawerClose {
		position: absolute;
		width: 40vw;
		height: 100vh;
		right: 0;
		top: 0;
		color: transparent;
		padding-bottom: 30upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
		letter-spacing: 5px;
		font-size: 50upx;
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
	}

	.DrawerClose.show {
		opacity: 1;
		pointer-events: all;
		width: 15vw;
		color: #fff;
	}

	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
		width: 64upx;
		height: 64upx;
		line-height: 64upx;
		margin: 0;
		display: inline-block;
	}

	.DrawerPage .cu-bar.tabbar .action .cu-avatar {
		margin: 0;
	}

	.DrawerPage .nav {
		flex: 1;
	}

	.DrawerPage .nav .cu-item.cur {
		border-bottom: 0;
		position: relative;
	}

	.DrawerPage .nav .cu-item.cur::after {
		content: "";
		width: 10upx;
		height: 10upx;
		background-color: currentColor;
		position: absolute;
		bottom: 10upx;
		border-radius: 10upx;
		left: 0;
		right: 0;
		margin: auto;
	}
	.DrawerPage .cu-bar.tabbar .action {
		flex: initial;
	}
</style>
